<script setup lang="ts">
import { ref, reactive, toRefs,onMounted } from 'vue'
import { useRouter } from 'vue-router';

import {
  findPostByTopicNameLike,
  findUserByNameLike,
  findTopicByNameLike,
} from '@/api/service'
import { baseUrl } from '@/api/request'
const router = useRouter()
const hasSomeThing = ref(true)

// 搜索相关
const searchState = () => {
  const state = reactive({
    value: '', // 搜索input框的值
    isSearch: true, // 是否显示历史搜索
    goodsList: [], // 根据搜索关键字返回的商品数据
    titleText: '搜索',
    scrollTop: 0, // 获取滚动高度
  })
  return toRefs(state)
}
const { value, isSearch, goodsList, titleText, scrollTop } = searchState()

const active = ref(0) // tab切换默认值

let testData = [
  { id: 1, title: '四件套', price: 999 },
  { id: 2, title: '被子', price: 555 },
  { id: 3, title: '枕头', price: 888 },
]

onMounted(async() => {
  handleSearch('')
})
// 获取搜索成功的数据
const getSearchResult = async (e) => {
  // if (active.value === 0) {
    const res1: any = await findPostByTopicNameLike({ name: e })
  console.log(res1)
  postDdata.value = res1.data

  const res2: any = await findUserByNameLike({ keyword: e })
  console.log(res2)
  userData.value = res2.data

  const res3: any = await findTopicByNameLike({ keyword: e })
  console.log(res3)
  topicData.value = res3.data
}
const returImg = (e) => {
  return `${baseUrl}/images/${e}`
}

const postDdata = ref()
const userData = ref()
const topicData = ref()

//切换展示列表
const isPost = ref(true)
const isUser = ref(false)
const isTopic = ref(false)
// 点击搜索的回调
const handleSearch = async (e) => {
  getSearchResult(e)
}

//模糊搜索函数

// 切换tab分类标签的回调
const handleTab = (e) => {
  // getSearchResult({keywords:value.value,searchValue: e.name})
  // console.log(e,'etabs');
  switch (e.name) {
    case 0:
      testData = testData
      isPost.value = true
      isUser.value = false
      isTopic.value = false
      break
    case 1:
      testData = testData
      isPost.value = false
      isUser.value = true
      isTopic.value = false

      break
    case 2:
      testData = testData.sort((a, b) => a.price - b.price)
      isPost.value = false
      isUser.value = false
      isTopic.value = true

      break
    default:
      break
  }
}

//点击搜出项的回调


const handelPostItemClick = (e) => {
  console.log(e)
  router.push(`postdetail?postId=${e.id}`)

}
const handelUserItemClick = (e) => {
  console.log(e)
  router.push(`userdetail?id=${e.id}`)
}
const handelTopicItemClick = (e) => {
  console.log(e)
  router.push(`postlistlayout?topicName=${e.name}`)
}
</script>

<template>
  <div class="search d-flex flex-column justify-content-start">
    <!-- 头部搜索 -->
    <van-sticky>
      <form action="javascript:return true">
        <van-search
          ref="search"
          @focus="isSearch = true"
          placeholder="请输入搜索文字"
          shape="round"
          v-model="value"
          show-action
          @click="isSearch = true"
          @search="handleSearch(value)"
          :autofocus="false"
        >
          <template #action>
            <div class="search_Btn" @click="handleSearch(value)">搜索</div>
          </template>
        </van-search>
      </form>
      <van-tabs v-model:active="active" @click-tab="handleTab">
        <van-tab title="帖子"></van-tab>
        <van-tab title="用户"></van-tab>
        <!-- <van-tab title="话题"></van-tab> -->
        <van-tab title="圈子"></van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 列表展示 -->
    <div
      class="card_Box mrn d-flex flex-column justify-content-start"
      v-if="hasSomeThing"
    >
      <div v-show="isPost">
        <div
          v-for="item in postDdata"
          :key="item.id"
          @click="handelPostItemClick(item)"
        >
          <div
            class="list_content d-flex justify-content-between align-items-center"
          >
            <div class="left">
              <van-image
                radius="14"
                width="130"
                height="120"
                fit="cover"
                :src="returImg(item.imgArray[0])"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <van-image></van-image>
                </template>
              </van-image>
            </div>
            <div
              class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4"
            >
              <div>{{ item.title }}</div>
              <div class="itemContent">{{ item.content }}</div>
              <div class="price">评论数{{ item.commits.length }}</div>
              <div class="price">点赞数{{ item.thumb }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="isUser">
        <div
          v-for="item in userData"
          :key="item.id"
          @click="handelUserItemClick(item)"
        >
          <div
            class="list_content d-flex justify-content-between align-items-center"
          >
            <div class="left">
              <van-image
                radius="14"
                width="130"
                height="120"
                fit="cover"
                :src="returImg(item.avatar)"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <van-image></van-image>
                </template>
              </van-image>
            </div>
            <div
              class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4"
            >
              <div>昵称:{{ item.nickname }}</div>
              <div class="itemContent">{{ item.intro }}</div>
              <div class="price">贴子数:{{ item.posts.length }}</div>
              <div>性别:{{ item.gender }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="isTopic">
        <div
          v-for="item in topicData"
          :key="item.id"
          @click="handelTopicItemClick(item)"
        >
          <div
            class="list_content d-flex justify-content-between align-items-center"
          >
            <div class="left">
              <van-image
                radius="14"
                width="130"
                height="120"
                fit="cover"
                :src="returImg(item.avatar)"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <van-image></van-image>
                </template>
              </van-image>
            </div>
            <div
              class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4"
            >
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="!hasSomeThing">
      <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无内容"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search {
  overflow: hidden;
  .search_Box {
    padding: 4px 10px;
    position: relative;
    display: flex;
    background-color: white;
    > div:nth-child(1) {
      width: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #5f656b;
      font-size: 20px;
    }
    > div:nth-child(2) {
      width: calc(100% - 8vw);
      .search_Btn {
        color: #b91c3b;
      }
    }
  }
  .mrn {
    width: 100vw;
    height: 100vh;
    > div:nth-child(1) {
      margin-top: 10px;
    }
    .list_content {
      height: 32vw;
      /* background-color: #f5f5f5; */
      border-radius: 10px;
      margin: 5px;
      padding: 0 10px;
      .left {
      }
      .right {
        overflow: hidden;
        > div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .price {
          color: red;
        }
      }
    }
  }
}
</style>
